<template lang="html">
  <el-row>
    <el-col :span="24" ref="limitBtnWidth">
      <el-space :size="10" id="actualBtnWidth" class="actualBtnWidth">
        <el-button type="primary" @click="openOpLogDrawer(props.chapter)" :icon="Document" title="操作日志"
          size="small"></el-button>

        <el-button type="primary" @click="openChapterContent(props.chapter)" :icon="Reading" title="正文"
          size="small"></el-button>
      </el-space>
    </el-col>
  </el-row>
  <operation-log-drawer ref="opLogDrawer"></operation-log-drawer>
</template>
<script setup lang="js">
import { ref, defineProps } from 'vue';
import { Document, Reading } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();
const opLogDrawer = ref(null); // 操作日志抽屉

const props = defineProps({
  chapter: {
    type: Object,
    required: true
  },
  bookId: {
    type: String,
    required: true
  }
});

function openOpLogDrawer(chapter) {
  if (opLogDrawer.value) {
    opLogDrawer.value.openDrawer({ sourceId: chapter.id, title: `${chapter.catalogueName} 操作日志` });
  }
}

function openChapterContent(chapter) {
  if (!chapter.crawlComplete) {
    ElMessage.warning('章节内容尚未爬取完成，无法查看正文！');
    return;
  }
  const contentRoute = router.resolve({
    path: `/content/${props.bookId}/${chapter.id}`,
  })
  window.open(contentRoute.href, '_blank');
}

</script>
<style lang="">

</style>
